﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>watch</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="name">
        <input type="text" v-model="user.id">
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                name: "aaa",
                user: {
                    id: 001
                }
            },
            watch: {
                 name: function (newValue, oldValue) {
                    console.log("修改之前的数据:" + oldValue + "修改之后的数据：" + newValue);
                 },

                //"user.id": function (newValue, oldValue) {
                //    console.log("修改之前的数据:" + oldValue + "修改之后的数据：" + newValue);
                //},

                "user.id": {
                    handler: function (newValue, oldValue) {
                        console.log("修改之前的数据:" + oldValue + "修改之后的数据：" + newValue);
                    },
                    deep: true //深度监听，当对象中的属性发生改变的时候也会监听
                },

                //下面的使用方式，不能获取 旧值
                //user: {
                //    handler: function (newValue, oldValue) {
                //        console.log("修改之前的数据:" + oldValue.id + "修改之后的数据：" + newValue.id);
                //    },
                //    deep: true //深度监听，当对象中的属性发生改变的时候也会监听
                //}
            },
        });

    </script>
</body>

</html>